// Element Plus 主题定制

// 自定义CSS变量覆盖Element Plus默认主题
:root {
  // 主色调
  --el-color-primary: var(--kexilo-primary);
  --el-color-primary-light-3: var(--kexilo-primary-light-3);
  --el-color-primary-light-5: var(--kexilo-primary-light-5);
  --el-color-primary-light-7: var(--kexilo-primary-light-7);
  --el-color-primary-light-8: var(--kexilo-primary-light-8);
  --el-color-primary-light-9: var(--kexilo-primary-light-9);
  --el-color-primary-dark-2: var(--kexilo-primary-dark-2);

  // 成功色
  --el-color-success: var(--kexilo-success);
  --el-color-success-light-3: var(--kexilo-success-light-3);
  --el-color-success-light-5: var(--kexilo-success-light-5);
  --el-color-success-light-7: var(--kexilo-success-light-7);
  --el-color-success-light-8: var(--kexilo-success-light-8);
  --el-color-success-light-9: var(--kexilo-success-light-9);
  --el-color-success-dark-2: var(--kexilo-success-dark-2);

  // 警告色
  --el-color-warning: var(--kexilo-warning);
  --el-color-warning-light-3: var(--kexilo-warning-light-3);
  --el-color-warning-light-5: var(--kexilo-warning-light-5);
  --el-color-warning-light-7: var(--kexilo-warning-light-7);
  --el-color-warning-light-8: var(--kexilo-warning-light-8);
  --el-color-warning-light-9: var(--kexilo-warning-light-9);
  --el-color-warning-dark-2: var(--kexilo-warning-dark-2);

  // 危险色
  --el-color-danger: var(--kexilo-danger);
  --el-color-danger-light-3: var(--kexilo-danger-light-3);
  --el-color-danger-light-5: var(--kexilo-danger-light-5);
  --el-color-danger-light-7: var(--kexilo-danger-light-7);
  --el-color-danger-light-8: var(--kexilo-danger-light-8);
  --el-color-danger-light-9: var(--kexilo-danger-light-9);
  --el-color-danger-dark-2: var(--kexilo-danger-dark-2);

  // 信息色
  --el-color-info: var(--kexilo-info);
  --el-color-info-light-3: var(--kexilo-info-light-3);
  --el-color-info-light-5: var(--kexilo-info-light-5);
  --el-color-info-light-7: var(--kexilo-info-light-7);
  --el-color-info-light-8: var(--kexilo-info-light-8);
  --el-color-info-light-9: var(--kexilo-info-light-9);
  --el-color-info-dark-2: var(--kexilo-info-dark-2);

  // 文本颜色
  --el-text-color-primary: var(--kexilo-text-color-primary);
  --el-text-color-regular: var(--kexilo-text-color-regular);
  --el-text-color-secondary: var(--kexilo-text-color-secondary);
  --el-text-color-placeholder: var(--kexilo-text-color-placeholder);
  --el-text-color-disabled: var(--kexilo-text-color-disabled);

  // 边框颜色
  --el-border-color: var(--kexilo-border-color);
  --el-border-color-light: var(--kexilo-border-color-light);
  --el-border-color-lighter: var(--kexilo-border-color-lighter);
  --el-border-color-extra-light: var(--kexilo-border-color-extra-light);
  --el-border-color-dark: var(--kexilo-border-color-dark);
  --el-border-color-darker: var(--kexilo-border-color-darker);

  // 填充颜色
  --el-fill-color: var(--kexilo-fill-color);
  --el-fill-color-light: var(--kexilo-fill-color-light);
  --el-fill-color-lighter: var(--kexilo-fill-color-lighter);
  --el-fill-color-extra-light: var(--kexilo-fill-color-extra-light);
  --el-fill-color-dark: var(--kexilo-fill-color-dark);
  --el-fill-color-darker: var(--kexilo-fill-color-darker);
  --el-fill-color-blank: var(--kexilo-fill-color-blank);

  // 背景颜色
  --el-bg-color: var(--kexilo-bg-color);
  --el-bg-color-page: var(--kexilo-bg-color-page);
  --el-bg-color-overlay: var(--kexilo-bg-color-overlay);

  // 阴影
  --el-box-shadow: var(--kexilo-box-shadow);
  --el-box-shadow-light: var(--kexilo-box-shadow-light);
  --el-box-shadow-lighter: var(--kexilo-box-shadow-lighter);
  --el-box-shadow-dark: var(--kexilo-box-shadow-dark);

  // 圆角
  --el-border-radius-base: var(--kexilo-border-radius-base);
  --el-border-radius-small: var(--kexilo-border-radius-small);
  --el-border-radius-round: var(--kexilo-border-radius-round);
  --el-border-radius-circle: var(--kexilo-border-radius-circle);

  // 组件尺寸
  --el-component-size-large: var(--kexilo-component-size-large);
  --el-component-size: var(--kexilo-component-size-default);
  --el-component-size-small: var(--kexilo-component-size-small);

  // 字体大小
  --el-font-size-extra-large: var(--kexilo-font-size-extra-large);
  --el-font-size-large: var(--kexilo-font-size-large);
  --el-font-size-medium: var(--kexilo-font-size-medium);
  --el-font-size-base: var(--kexilo-font-size-base);
  --el-font-size-small: var(--kexilo-font-size-small);
  --el-font-size-extra-small: var(--kexilo-font-size-extra-small);

  // 禁用透明度
  --el-disabled-opacity: var(--kexilo-disabled-opacity);

  // 动画时长
  --el-transition-duration: var(--kexilo-transition-duration);
  --el-transition-duration-fast: var(--kexilo-transition-duration-fast);

  // Z-index
  --el-z-index-normal: var(--kexilo-z-index-normal);
  --el-z-index-top: var(--kexilo-z-index-top);
  --el-z-index-popper: var(--kexilo-z-index-popper);
}

// Element Plus 组件样式定制

// 按钮组件
.el-button {
  border-radius: var(--el-border-radius-base);
  font-weight: 400;
  
  &.is-circle {
    border-radius: var(--el-border-radius-circle);
  }
  
  &.is-round {
    border-radius: var(--el-border-radius-round);
  }
}

// 输入框组件
.el-input {
  .el-input__wrapper {
    border-radius: var(--el-border-radius-base);
    transition: var(--el-transition-duration);
    
    &:hover {
      box-shadow: 0 0 0 1px var(--el-color-primary-light-7) inset;
    }
    
    &.is-focus {
      box-shadow: 0 0 0 1px var(--el-color-primary) inset;
    }
  }
}

// 选择器组件
.el-select {
  .el-select__wrapper {
    border-radius: var(--el-border-radius-base);
  }
}

// 表格组件
.el-table {
  border-radius: var(--el-border-radius-base);
  overflow: hidden;
  
  .el-table__header {
    th {
      background-color: var(--el-fill-color-light);
      border-bottom: 1px solid var(--el-border-color-lighter);
    }
  }
  
  .el-table__body {
    tr {
      &:hover {
        background-color: var(--el-fill-color-light);
      }
    }
  }
}

// 分页组件
.el-pagination {
  .btn-prev,
  .btn-next,
  .el-pager li {
    border-radius: var(--el-border-radius-base);
    margin: 0 2px;
  }
}

// 卡片组件
.el-card {
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow-lighter);
  
  .el-card__header {
    border-bottom: 1px solid var(--el-border-color-lighter);
  }
}

// 对话框组件
.el-dialog {
  border-radius: var(--el-border-radius-base);
  
  .el-dialog__header {
    border-bottom: 1px solid var(--el-border-color-lighter);
  }
  
  .el-dialog__footer {
    border-top: 1px solid var(--el-border-color-lighter);
  }
}

// 抽屉组件
.el-drawer {
  .el-drawer__header {
    border-bottom: 1px solid var(--el-border-color-lighter);
  }
}

// 菜单组件
.el-menu {
  border-radius: var(--el-border-radius-base);
  
  .el-menu-item,
  .el-sub-menu__title {
    border-radius: var(--el-border-radius-small);
    margin: 2px 8px;
    
    &:hover {
      background-color: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
    }
    
    &.is-active {
      background-color: var(--el-color-primary-light-8);
      color: var(--el-color-primary);
    }
  }
}

// 标签页组件
.el-tabs {
  .el-tabs__header {
    margin-bottom: 0;
    
    .el-tabs__item {
      border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
      
      &.is-active {
        background-color: var(--el-bg-color);
      }
    }
  }
  
  .el-tabs__content {
    background-color: var(--el-bg-color);
    border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) var(--el-border-radius-base);
    border: 1px solid var(--el-border-color-lighter);
    border-top: none;
    padding: 20px;
  }
}

// 消息提示
.el-message {
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow);
}

.el-notification {
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow);
}

// 工具提示
.el-tooltip__popper {
  border-radius: var(--el-border-radius-base);
}

// 气泡确认框
.el-popconfirm {
  border-radius: var(--el-border-radius-base);
}

// 弹出框
.el-popover {
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow);
}

// 下拉菜单
.el-dropdown-menu {
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow);
  
  .el-dropdown-menu__item {
    border-radius: var(--el-border-radius-small);
    margin: 2px 8px;
    
    &:hover {
      background-color: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
    }
  }
}

// 表单组件间距调整
.el-form {
  .el-form-item {
    margin-bottom: 18px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

// 响应式优化
@media (max-width: 768px) {
  .el-dialog {
    width: 90% !important;
    margin: 5vh auto;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .el-pagination {
    .el-pagination__sizes,
    .el-pagination__jump {
      display: none;
    }
  }
}
